<!--
 * @Author: sjt
 * @Date: 2022-09-20 10:14:25
 * @LastEditors: sjt
 * @LastEditTime: 2024-09-29 10:30:00
 * @Description: file content
 * @FilePath: \易拓\sj-board\src\components\Header.vue
-->
<template>
  <div class="wrap-header">
    <div class="header-tools">
      <div></div>
      <div class="item-right">
        <div class="date-info">
          <span>{{ day }}</span>
          <span v-cloak>{{ time }}</span>
        </div>
      </div>
    </div>
    <div class="title" v-if="route.name !== 'pconline'"></div>
  </div>
</template>

<script setup>
import { onMounted, ref, onBeforeUnmount, watch } from '@vue/runtime-core'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
let day = ref('')
let time = ref('00:00:00')
let timer = ref(null)
const menu = ref([
  {
    name: '园区概况',
    route: 'park'
  },
  {
    name: '凯度家具',
    route: 'kaidu'
  }
])
watch(() => route.name,
  (n, o) => {
    currentMenu.value = route.meta.index
  }
)
let currentMenu = ref(0)
const initDate = () => {
  let myDate = new Date()
  let Y = myDate.getFullYear() //获取当前完整年份
  let M = myDate.getMonth() + 1 //获取当前月份
  let D = myDate.getDate() //获取当前日1-31
  let H = myDate.getHours() //获取当前小时
  let i = myDate.getMinutes() //获取当前分钟
  let s = myDate.getSeconds() //获取当前秒数
  day.value = Y + '-' + M + '-' + D

  timer = setInterval(() => {
    let date = new Date()
    let Y = date.getFullYear() //获取当前完整年份
    let M = date.getMonth() + 1 //获取当前月份
    let D = date.getDate() //获取当前日1-31
    let H = date.getHours() //获取当前小时
    let i = date.getMinutes() //获取当前分钟
    let s = date.getSeconds() //获取当前秒数
    time.value =
      (H >= 10 ? H : '0' + H) +
      ':' +
      (i >= 10 ? i : '0' + i) +
      ':' +
      (s >= 10 ? s : '0' + s)
    day.value = Y + '/' + M + '/' + D
  }, 1000)
}
const handelCheck = (i, r) => {
  sessionStorage.setItem('currentMenu', i)
  currentMenu.value = i
  if (i) {
    function sendMessageToSwitchCompany () {
      window.vuplex.postMessage({
        type: 'SwitchCompany',
        message: 'A17'
      })
    }
    if (window.vuplex) {
      //判断网页是否加载
      sendMessageToSwitchCompany() //如果加载了，发送消息
    } else {
      window.addEventListener('vuplexready', sendMessageToSwitchCompany) //当初始化完成，会调用发送事件
    }
  } else {
    function sendMessageToSwitchCompany () {
      window.vuplex.postMessage({
        type: 'SwitchParkView',
        message: ''
      })
    }
    if (window.vuplex) {
      //判断网页是否加载
      sendMessageToSwitchCompany() //如果加载了，发送消息
    } else {
      window.addEventListener('vuplexready', sendMessageToSwitchCompany) //当初始化完成，会调用发送事件
    }
  }
  router.push({
    name: r
  })
}
onMounted(() => {
  initDate()
  currentMenu.value = route.meta.index
})
onBeforeUnmount(() => {
  clearInterval(timer)
})
</script>

<style lang="scss" scoped>
.wrap-header {
  width: 100%;
  position: relative;
  background-position: center;
  height: 8.9%;
  z-index: 3;
  font-weight: 400;
  font-size: 30px;
  color: #cdd6e3;
  background: url('@/assets/images/page1/header.png') no-repeat;
  background-size: 100% auto;

  .header-tools {
    z-index: 45;
    width: 100%;
    position: absolute;
    top: 25px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .item-left {
      display: flex;
      align-items: center;
      margin-left: 100px;

      .buttons {
        cursor: pointer;
        width: 322px;
        height: 86px;
        font-family: AlibabaPuHuiTiB;
        font-weight: 400;
        font-size: 32px;
        color: #b3b7c0;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .checked {
        cursor: pointer;
        width: 322px;
        height: 86px;
        font-family: AlibabaPuHuiTiB;
        font-weight: 400;
        font-size: 32px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .item-right {
      margin-right: 42px;
      display: flex;
      align-items: center;

      .date-info {
        display: flex;
        align-items: center;

        span {
          font-family: TRENDS;
          font-weight: 400;
          font-size: 18px;
          color: #CDD6E3;
          margin-right: 25px;
          letter-spacing: 4px;
        }
      }
    }
  }

  .title {
    position: absolute;
    left: 0;
    top: -52px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: YouSheBiaoTiHei;
    font-weight: 400;
    font-size: 96px;
    color: #eff8fc;
    letter-spacing: 5px;
    background: linear-gradient(0deg,
        rgba(119, 186, 255, 1) 0%,
        rgba(233, 248, 255, 0.9) 73.3154296875%,
        rgba(255, 255, 255, 0.75) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

@media screen and (max-width: 1920px) {
  .title {

    top: -32px !important;

  }
}

@media screen and (min-width: 1921px) and (max-width: 4161px) {
  .title {
    top: -52px !important;

  }
}
</style>
